<template>
  <div id="new-group-chat-page">
    <h3>
      <van-icon
        name="arrow-left"
        color="rgb(107, 107, 107)"
        @click="routerGoBack"
      />
      <span class="set">
        <span>{{ groupName }}</span>
        <img src="../../assets/image/more.png" />
      </span>
    </h3>
    <main @click="handle">
      <div class="content">
        <p>{{ initCreateTime }}</p>
        <p>你邀请了{{ promptWords }}加入了群聊</p>
      </div>
    </main>
    <footer>
      <div class="choose">
        <div class="left">
          <img src="../../assets/image/ChatDesView/voice.png" />
        </div>
        <div class="container">
          <input v-model="inputValue" type="text" />
        </div>
        <div class="right">
          <span>
            <img src="../../assets/image/ChatDesView/emote.png" />
          </span>
          <span @click="handleClick" v-if="!inputValue">
            <img src="../../assets/image/ChatDesView/more.png" />
          </span>
          <button v-else>发送</button>
        </div>
      </div>
      <transition name="slide">
        <div class="list" v-show="showFunctionList">
          <div class="item">
            <img src="../../assets/image/ChatDesView/photography.png" />
            <span>相册</span>
          </div>
          <div class="item" @click="takePhoto">
            <img src="../../assets/image/ChatDesView/takephoto.png" />
            <span>拍摄</span>
          </div>
          <div class="item">
            <img src="../../assets/image/ChatDesView/phone.png" />
            <span>视频通话</span>
          </div>
          <div class="item" @click="map">
            <img src="../../assets/image/ChatDesView/place.png" />
            <span>位置</span>
          </div>
          <div class="item">
            <img src="../../assets/image/ChatDesView/redpack.png" />
            <span>红包</span>
          </div>
          <div class="item">
            <img src="../../assets/image/ChatDesView/money.png" />
            <span>转账</span>
          </div>
          <div class="item">
            <img src="../../assets/image/ChatDesView/talk.png" />
            <span>语音输入</span>
          </div>
          <div class="item">
            <img src="../../assets/image/ChatDesView/collect.png" />
            <span>我的收藏</span>
          </div>
        </div>
      </transition>
    </footer>
  </div>
</template>

<script>
import WebIM from "../../utils/WebIM";
import eventBus from "../eventbus";
export default {
  data() {
    return {
      groupName: "",
      //   群组刚刚创建的时间
      initCreateTime: "",
      //   新建群聊的提示语
      promptWords: "",
      //  键盘输入框
      inputValue: "",
      // 显示可操作功能列表
      showFunctionList: false,
    };
  },
  created() {
    eventBus.$on("location", function (data) {}.bind(this));
    this.getGroupInfo();
  },
  methods: {
    routerGoBack() {
      this.$router.push({
        path: "/",
      });
    },
    takePhoto() {
      this.$router.push("/take");
    },
    map() {
      this.$router.push("/map");
    },
    handle() {
      this.showFunctionList = false;
    },
    handleClick() {
      this.showFunctionList = true;
    },
    getGroupInfo() {
      let option = {
        // 群组 ID
        groupId: this.$route.params.groupId,
      };
      //   获取群信息和创建时间加入的时间戳
      WebIM.conn.getGroupInfo(option).then((res) => {
        this.groupName = res.data[0].name;
        let date = new Date(res.data[0].affiliations[0].joined_time);
        let hours =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        this.initCreateTime = `${hours}:${minutes}`;
      });
      //   获取群成员信息
      let option1 = {
        pageNum: 1,
        pageSize: 200,
        groupId: this.$route.params.groupId,
      };
      WebIM.conn.listGroupMembers(option1).then((res) => {
        let newArr = res.data.filter((item) => {
          if (item.member) {
            return true;
          } else {
            return false;
          }
        });
        newArr.map((item, i) => {
          WebIM.conn.fetchUserInfoById(item.member).then((r) => {
            if (i !== newArr.length - 1) {
              this.promptWords += r.data[item.member].nickname + "、";
            } else {
              this.promptWords += r.data[item.member].nickname;
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#new-group-chat-page {
  width: 100vw;
  height: 100vh;
  color: rgb(164, 164, 164);
  background-color: var(--theme-background-black);
  h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 45px;
    padding: 10px 10px 0 10px;
    background-color: rgb(67 67 67);
    .set {
      width: 60%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      color: #eee;
      img {
        width: 20px;
      }
    }
  }
    main {
    width: 100%;
    height: 88vh;
    .content {
    p {
      padding-top: 10px;
      text-align: center;
      font-size: 12px;
    }
  }
  }
 
  footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    .choose {
      display: flex;
      width: 100%;
      height: 45px;
      background-color: #1e1e1e;
      padding: 0 10px;

      div {
        margin: auto;
      }

      .left {
        flex: 0 0 10%;

        img {
          width: 100%;
        }
      }

      .container {
        flex: 0 0 70%;
        // border: 1px brown solid;

        input {
          width: 85%;
          height: 29px;
          overflow: hidden;
          background-color: rgba(128, 128, 128, 0.445);
          border: none;
        }
      }

      .right {
        flex: 0 0 20%;
        display: flex;
        span {
          flex: 1;

          img {
            width: 100%;
          }
        }
        button {
          margin: 0 2px;
          background-color: #05c160;
          color: #fff;
          font-size: 12px;
          border: none;
          border-radius: 5px;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 100%;
      color: #fff;
      background-color: #1e1e1e;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        height: 80px;
        // margin: auto;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        padding: 10px 0;

        img {
          width: 35px;
        }
        span {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>